<template>
    <div class="my-history">
        <div class="title">
            贺卡记录
        </div>
        <div class="my-history-box">
            <scroll-view
                style="height: 100%;background-color: #FFFFFF"
                scroll-y="true"
                @scrolltolower="handleScrolltolower">
                <div class="my-history-item" v-for="item in historyList" :key="item.id">
                    <img src="" alt="">
                    <div class="my-history-item-right">
                        <h6>{{ item.username }}</h6>
                        <p>制作时间：{{ item.create_time }}</p>
                    </div>
                </div>
                <div style="text-align: center;line-height: 18px;color: rgba(31, 34, 45, 0.54);font-size: 14px">
                    {{ loadingText() }}
                </div>
            </scroll-view>
            
        </div>
    </div>
</template>

<script>
import {cardRequest} from "@/api";

export default {
    name: "inedx",
    data() {
        return {
            pageNo: 1,
            pageSize: 20,
            total: 0,
            historyList: []
        }
    },
    onLoad() {
        this.getPageList()
    },
    methods: {
        getPageList() {
            cardRequest.historyList({ pageNo: this.pageNo, pageSize: this.pageSize }).then(res => {
                this.historyList = [...this.historyList, ...res.data.data]
                this.total = res.data.total
            })
        },
        //  滚动到底部触发加载更多数据
        handleScrolltolower() {
            let len = this.historyList.length
            if(len >= this.total) {
                return
            }
            this.pageNo += 1
            this.getPageList()
        },
        loadingText() {
            if (this.historyList.length < this.total) {
                return '加载中'
            } else {
                return  '没有更多数据了！'
            }
        }
    }
}
</script>

<style lang="less">
.my-history {
    height: 100vh;
    overflow: hidden;
    background-color: #FBFBFB;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    .title {
        margin-bottom: 21px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1F222D;
        line-height: 18px;
    }
    .my-history-box {
        flex-grow: 1;
        overflow: hidden;
    }
    .my-history-item {
        width: 335px;
        height: 68px;
        background: #FFFFFF;
        border-radius: 4px;
        padding: 12px;
        display: flex;
        align-items: center;
        img  {
            width: 44px;
            height: 44px;
            border-radius: 4px;
            overflow: hidden;
            margin-right: 12px;
        }
        .my-history-item-right {
            h6 {
                height: 20px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #1F222D;
                line-height: 20px;
                margin-bottom: 6px;
            }
            p {
                height: 17px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(31, 34, 45, 0.54);
                line-height: 17px;
            }
        }
    }
}
</style>